<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 上边 -->
        <div class="top-box">
          <!-- 左侧 -->
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字" class="el-leftp">
              <el-input size="small" v-model="q.keyword" placeholder="根据文章标题搜索"></el-input>
            </el-form-item>
            <el-form-item label="状态" class="el-leftp">
              <el-select v-model="q.state" placeholder="请选择" size="small">
                <el-option v-for="item in state" :key="item.id" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="empty">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
          <!-- 右侧 -->
          <div>
            <el-button type="success" size="mini" icon="el-icon-edit" @click="isShowAdd = true">新增技巧</el-button>
          </div>
        </div>
        <!-- 下边 -->
        <el-tag class="el-tag" size="info" style="width:100%">
          <i class="el-icon-info" style="margin:5px"></i>
          <span> 数据一共 {{ total }} 条</span>
        </el-tag>
        <div class="bottom-box">
          <!-- 文章列表 -->
          <el-table :data="essList">
            <el-table-column label="序号" type="index" width="80px"></el-table-column>
            <el-table-column label="文章标题" min-width="400px">
              <template v-slot="{ row }">
                <div>
                  <span>{{ row.title }}</span>
                  <i v-if="row.videoURL" class="el-icon-film" @click="playV(row.videoURL)"></i>
                  <div v-if="isPlayV" class="playVideo">
                    <div class="closeV" @click="isDown">
                      <i class="el-icon-close"></i>
                    </div>
                    <video autoplay muted :src="row.videoURL"></video>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="阅读数" prop="visits" min-width="300px"></el-table-column>
            <el-table-column label="录入人" prop="username" min-width="300px"></el-table-column>
            <el-table-column label="录入时间" prop="createTime" min-width="300px">
              <template v-slot="{ row }">{{ row.createTime | dateFormat }}</template>
            </el-table-column>
            <el-table-column label="状态" prop="state" min-width="100px">
              <template v-slot="{ row }">已{{ row.state | myStatus }}</template>
            </el-table-column>
            <el-table-column label="操作" width="180px" fixed="right">
              <!-- 按钮区域 -->
              <template v-slot="{ row }">
                <div class="center-item">
                  <el-button :underline="false" type="text" @click="showView(row.id)">预览</el-button>
                  <el-button v-if="row.state === 1" :underline="false" type="text" @click="changeB(row.id, row.state)"
                    >禁用</el-button
                  >
                  <el-button v-if="row.state === 0" :underline="false" type="text" @click="changeB(row.id, row.state)"
                    >启用</el-button
                  >
                  <el-button :disabled="row.state === 1" :underline="false" type="text" @click="showEdit(row.id)"
                    >修改</el-button
                  >
                  <el-button :disabled="row.state === 1" :underline="false" type="text" @click="remove(row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <div class="el-flo">
            <el-pagination
              style="margin:20px 0"
              :current-page.sync="q.page"
              @size-change="handleSizeChange"
              :page-size="q.pagesize"
              @current-change="handleCurrentChange"
              layout="prev, pager, next, sizes, jumper"
              :page-sizes="[5, 10, 20, 50]"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 使用新增技巧子组件 -->
    <AddSkills :show-dialog.sync="isShowAdd" @reload="initEssList" />

    <!-- 使用预览文章子组件 -->
    <PreView :id.sync="id" :show-dialog.sync="isShowView" @reload="initEssList" />

    <!-- 使用修改文章子组件 -->
    <ArtModify :id.sync="id" :show-dialog.sync="isShowEdit" @reload="initEssList" />
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list, remove, changeState } from '@/api/hmmm/articles.js'
// 导入子组件
import AddSkills from './companys/AddSkills.vue'
import ArtModify from './companys/ArtModify.vue'
import PreView from './companys/PreView.vue'
export default {
  name: 'articles',
  // 注册子组件
  components: {
    AddSkills,
    ArtModify,
    PreView
  },
  data() {
    return {
      // 查询的参数对象
      q: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      total: 0,
      // 文章列表数据
      essList: [],
      state: status,

      // 控制新增技巧对话框的显示和隐藏
      isShowAdd: false,
      id: '',
      isShowEdit: false,
      isShowView: false,
      isPlayV: false
    }
  },
  created() {
    this.initEssList()
  },
  methods: {
    // 禁用启用
    async changeB(id, state) {
      const newState = state === 1 ? 0 : 1
      await changeState({ id, state: newState })
      this.initEssList()
    },
    // 请求文章列表的数据
    async initEssList() {
      const result = await list(this.q)
      this.total = result.data.counts
      this.essList = result.data.items
    },
    // 监听每页展示量改变
    handleSizeChange(newSize) {
      this.q.pagesize = newSize
      // 每次页容量变化，都要重置页码值为 1
      // 防止获取到的数据为空的问题
      this.q.pagenum = 1
      this.initEssList()
    },
    // 监听页码值改变
    handleCurrentChange(newPage) {
      this.q.page = newPage
      this.initEssList()
    },
    showEdit(id) {
      this.id = id + ''
      this.isShowEdit = true
    },
    showView(id) {
      this.id = id + ''
      this.isShowView = true
    },
    playV(videoURL) {
      console.log(videoURL)
      this.videoURL = videoURL + ''
      this.isPlayV = true
    },
    isDown() {
      this.isPlayV = !this.isPlayV
    },
    // 删除文章
    async remove(id) {
      const result = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (result === 'cancel') return

      // 调用删除的接口
      await remove({ id: id })

      this.$message.success('删除成功！')
      this.initEssList()
    },
    // 搜索
    async search() {
      const res = await list(this.q)
      this.essList = res.data.items
      this.total = res.data.counts
    },
    // 清除
    empty() {
      this.q.keyword = ''
      this.q.state = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card-2 {
  margin-top: 15px;
}

.top-box {
  display: flex;
  justify-content: space-between;
}
.app-container {
  padding: 10px;
}
.el-leftp {
  padding-left: 35px;
}
.el-flo {
  float: right;
}
.el-tag {
  margin-bottom: 20px;
  font-size: 13px;
}
.center-item {
  display: flex;
  justify-content: space-around;
}
.el-icon-film {
  padding-left: 5px;
  font-size: 18px;
  color: blue;
}
.playVideo {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.08);
  z-index: 99999;
  .closeV {
    position: relative;
    left: 50%;
    top: 50px;
    transform: translate(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.09);
    border-radius: 50%;
    cursor: pointer;
    z-index: 999999;

    .el-icon-close {
      position: absolute;
      top: 30%;
      left: 50%;

      transform: translate(-50%);
      color: white;
      font-size: 23px;
    }
  }
  video {
    position: absolute;
    left: 50%;
    left: 50%;
    transform: translate(-50%);
    width: 800px;
    height: 600px;
  }
}
</style>
